.header {
    position: relative;
}
.banner-img {
    width: 320px;
    height: 152px;
    margin: 0 auto;
    overflow: hidden;
    background-color: black;
}
ul{
    list-style: none;
    width:calc(320px*4);
    height: 152px;
    animation: move 10s linear infinite;
}
ul>li{
    width: 320px;
    float: left;
}
li>img{
    width: 320px;
    height: 152px;
}
@keyframes move {
    from{
        margin-left: 0;
    }
    to{
        margin-left:calc(-320px*3);
    }
}

ul:hover{
    animation-play-state: paused;
}
ul:hover li{
    opacity: 0.5;
}
ul li:hover{
    opacity:1;
}
